<template>
    <div id="scoreDistributionChart" :style="{ width: props.width, height: props.height }"></div>
</template>

<script setup lang="ts">
import { useScoreStore } from '@/stores';
import * as echarts from 'echarts';
import { onMounted } from 'vue';

const props = defineProps<{ width: string, height: string }>();

onMounted(() => {
    try {
        drawChart();
    } catch (error) {
        console.error(error);
    }
});

async function drawChart() {
    await useScoreStore().init()
    const filteredScores = useScoreStore().score.filter(s => s.regular !== -1 && s.finalScore !== -1)
    const c = document.getElementById('scoreDistributionChart')
    if (!c) {
        console.error('元素不存在！')
        return;
    }
    const chart = echarts.init(c);
    const option: echarts.EChartsOption = {
        title: {
            text: '成绩情况分析',
            textStyle: {
                color: '#333',
                fontSize: 18
            }
        },
        legend: {
            data: ['优秀', '良好', '中等', '合格', '不合格'],
            top: 'bottom'
        },
        tooltip: {
            trigger: 'item',
            formatter: function (params: any) {
                return params.name + ':' + params.value + '(' + params.percent + '%)<br>' + getScoreList(params.name)
            }
        },
        series: [
            {
                name: '成绩',
                type: 'pie',
                radius: '60%',
                center: ['50%', '50%'],
                data: [
                    { value: filteredScores.filter(s => s.total >= 90).length, name: '优秀' },
                    { value: filteredScores.filter(s => s.total >= 80 && s.total < 90).length, name: '良好' },
                    { value: filteredScores.filter(s => s.total >= 70 && s.total < 80).length, name: '中等' },
                    { value: filteredScores.filter(s => s.total >= 60 && s.total < 70).length, name: '合格' },
                    { value: filteredScores.filter(s => s.total < 60).length, name: '不合格' }
                ].sort((a, b) => b.value - a.value),
            }
        ]
    };
    chart.setOption(option)
}
function getScoreList(grade: string): string {
    let result: string = ""
    const filteredScores = useScoreStore().score.filter(s => s.regular !== -1 && s.finalScore !== -1)
    switch (grade) {
        case '优秀': {
            filteredScores.filter(s => s.total >= 90).forEach(
                (val) => {
                    result += val.name
                    result += ','
                }
            )
            break
        }
        case '良好': {
            filteredScores.filter(s => s.total >= 80 && s.total < 90).forEach(
                (val) => {
                    result += val.name
                    result += ','
                }
            )
            break
        }
        case '中等': {
            filteredScores.filter(s => s.total >= 70 && s.total < 80).forEach(
                (val) => {
                    result += val.name
                    result += ','
                }
            )
            break
        }
        case '合格': {
            filteredScores.filter(s => s.total >= 60 && s.total < 70).forEach(
                (val) => {
                    result += val.name
                    result += ','
                }
            )
            break
        }
        default: {
            filteredScores.filter(s => s.total < 60).forEach(
                (val) => {
                    result += val.name
                    result += ','
                }
            )
            break
        }
    }
    result = result.slice(0, -1)
    return result
}
</script>